<script setup>
  import { computed } from 'vue';
  import { Position, Handle } from '@vue-flow/core';

  const props = defineProps({
    position: {
      type: Object,
      required: true,
    },
  });

  const x = computed(() => `${Math.round(props.position.x)}px`);
  const y = computed(() => `${Math.round(props.position.y)}px`);
</script>

<template>
  <div class="vue-flow__node-custom">
    <div> {{ x }} {{ y }}</div>
    <Handle type="source" :position="Position.Bottom" />
    <Handle type="source" :position="Position.Bottom" />
  </div>
</template>

<style lang="scss" scoped>
  /* Use a purple theme for our custom node */
  .vue-flow__node-custom {
    background: purple;
    color: white;
    border: 1px solid purple;
    border-radius: 4px;
    box-shadow: 0 0 0 1px purple;
    padding: 8px;
    width: 250px;
  }
</style>
